<template>
    <div id="highlight">
        <v-title title="风险Highlight报表"></v-title>
    <el-row class="bgColor">
      <el-col :xs="24" :sm="24" :lg="24" class="toFlex">
        <div class="item">
          <label for="cascader">选择项目:</label>
          <el-cascader
            clearable
            placeholder="请选择"
            :options="selector"
            filterable
            :show-all-levels="false"
            :collapse-tags="true"
            v-model="selected"
            @change="toChange"
            :props="props"
            style="margin-left: 10px; width:225px"
            id="cascader"
            >
          </el-cascader>
          <label for="person" style="margin-left: 195px">风险责任人:</label>
          <el-select v-model="value" placeholder="请选择" id="person" multiple  clearable @change="personSearch" style="margin-left: 10px;width: 230px;">
            <el-option
            v-for="item in personOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
         </el-select>
        </div>   
             
      </el-col>
      <el-col style="margin-top:10px">
        <div>
          <label for="level">解决层级:</label>
          <el-select v-model="value1" placeholder="请选择" id="level" multiple  clearable @change="levelSearch" style="margin-left: 6px; width:225px">
            <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
         </el-select>
          <label for="level" style="margin-left: 200px">风险状态:</label>
          <el-select v-model="value2" placeholder="请选择" id="status" multiple  clearable @change="statusSearch" style="margin-left: 6px;width: 230px;">
            <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
         </el-select>
        </div>
      </el-col>
      <el-button type="warning" round class="down" @click="down">导出报表</el-button>
    </el-row>
        <el-table
            id="deepwidth"
            :data="tableData"
            border
            style="width: 100%;margin-top: 20px"
            :header-cell-style="{background:'#42b1e8', color: 'white'}">

            <el-table-column label="事业部" width="180" align="center">
             <template slot-scope="scope">
                 {{ scope.row.dept_name}}
             </template>
            </el-table-column>

            <el-table-column label="项目名" align="center">
             <template slot-scope="scope">
                 {{ scope.row.project_name}}
             </template>
            </el-table-column>

            <el-table-column label="项目状态" align="center">
             <template slot-scope="scope">
                 {{ scope.row.project_status}}
             </template>
            </el-table-column>

            <el-table-column label="PM" align="center">
             <template slot-scope="scope">
                 {{ scope.row.pm_zh}}
             </template>
            </el-table-column>

            <el-table-column label="AM" align="center">
             <template slot-scope="scope">
                 {{ scope.row.am_zh}}
             </template>
            </el-table-column>
            
            <el-table-column label="销售" align="center">
             <template slot-scope="scope">
                 {{ scope.row.xs_zh}}
             </template>
            </el-table-column>

            <el-table-column label="客户简称" align="center">
             <template slot-scope="scope">
                 {{ scope.row.kh_zh}}
             </template>
            </el-table-column>


            <el-table-column label="风险描述" align="center" width="300" show-overflow-tooltip>
             <template slot-scope="scope">
                 {{ scope.row.risk}}
             </template>
            </el-table-column>
            
            <el-table-column label="解决方案" align="center" width="150" show-overflow-tooltip>
             <template slot-scope="scope">
                 {{ scope.row.doc}}
             </template>
            </el-table-column>

            <el-table-column label="解决时间" align="center">
             <template slot-scope="scope">
                 {{ scope.row.time}}
             </template>
            </el-table-column>

            <el-table-column label="风险责任人" align="center">
             <template slot-scope="scope">
                 {{(scope.row.ownerList).join(',')}}
             </template>
            </el-table-column>

            <el-table-column label="解决层级" align="center">
             <template slot-scope="scope">
                 {{ scope.row.level}}
             </template>
            </el-table-column>

            <el-table-column label="风险状态" align="center">
             <template slot-scope="scope">
                 {{ scope.row.status}}
             </template>
            </el-table-column>
            
            <el-table-column label="最后更新时间" align="center">
             <template slot-scope="scope">
                 {{ scope.row.last_update}}
             </template>
            </el-table-column>
        </el-table>
        <el-pagination
        class="marT"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="baseSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        >
      </el-pagination>
    </div>
</template>

<script>
import VTitle from '@/views/sys/internetThings/title';
import Cookies from 'js-cookie';
import { mapState, mapMutations } from 'vuex';
import { getToken, getName, removeToken, removeName } from '@/utils/auth';
import http from '@/views/sys/axios';
import { Loading } from 'element-ui';
import { getHeader } from '@/app.config';
export default {
    name:'highlightforms',
    components:{
        VTitle,
    },
    data() {
        return {
            value2:[],
            paramsStatus:[],
            statusOptions:[],
            paramsLevel:[],
            value1:[],
            levelOptions:[],
            paramsName:[],
            personOptions:[],
            value:[],
            // optionsList:[],
            owner:'',
            props: { multiple: true },
            proIdListArr:[],
            selected: null,
            selector: [],
            baseSize: 10,
            total: 0,
            current:1,
            tableData: []
        }
    },
    created () {
      this.getOptionsResult()
      this.getTableData()
      this.getPerson()
      this.getLevel()
      this.getStatus()
    },
    mounted(){
    },
    methods: {
        down(res, name){
            this.loading = true
            http.get(`/api/report/project/weekly/report/highlight/data_to_excel`,{ responseType: 'blob' })
            .then((res) => {
                const { data, code } = res;
                if (code === 200) {
                let blob = new Blob([data], { type: 'application/vnd.ms-excel' })
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '风险Highlight报表.xlsx');
                document.body.appendChild(link);
                link.click();
                URL.revokeObjectURL(link.href);
                document.body.removeChild(link);
                this.loading = false
                } else {
                this.$message.error('下载出错了!');
                }
            })
            .catch((err) => {
                const { data } = err;

                if (data) {
                console.log(565,data)
                let blob = new Blob([data], { type: 'application/vnd.ms-excel' });
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '风险Highlight报表.xlsx');
                document.body.appendChild(link);
                link.click();
                URL.revokeObjectURL(link.href);
                document.body.removeChild(link);
                this.loading = false
                } else {
                this.$message.error('下载出错了!');
                this.loading = false
                }
            })
        },
        statusSearch(e){
            this.paramsStatus = e
            this.current = 1
            this.getTableData()
        },
        getStatus(){
            http.get(`/api/report/project/weekly/report/highlight/condition?name=风险状态`)
            .then((res => {
                this.statusOptions = res.data
            }))
        },
        levelSearch(e){
            this.paramsLevel = e
            this.current = 1
            this.getTableData()
        },
        getLevel(){
            http.get(`/api/report/project/weekly/report/highlight/condition?name=解决层级`)
            .then((res => {
                this.levelOptions = res.data
            }))
        },
        personSearch(e){
            this.paramsName = e
            this.current = 1
            this.getTableData()
        },
        getPerson(){
            http.get(`/api/report/project/weekly/report/highlight/condition?name=风险责任人`)
            .then((res => {
                this.personOptions = res.data
            }))
        },
        handleCurrentChange(val){
            this.current = val;
            this.getTableData()
        },
        handleSizeChange(){
        },
        getTableData(){
            let data = {}
            data.page = this.current
            data.project_id = this.proIdListArr
            data.ownerList = this.paramsName
            data.level = this.paramsLevel
            data.status = this.paramsStatus
            http.post(`/api/report/project/weekly/report/highlight/data`,data)
            .then((res) => {
                const { data,code,count } = res
                if(res.code === 200){
                    this.tableData = res.result
                    this.total = count || 0
                }
            })
        },
        ...mapMutations('conditions', [
        'setDispose'
      ]),
       getOptions() {
        return http.get(`/api/report/project/weekly/report/highlight/list`)
      },
      async getOptionsResult() {
        try {
          const { code, project_list } = await this.getOptions()          
          if(code === 200) {
            this.selector = project_list      
          }
        } catch (err) {
          throw new Error(err)
        }

      },
      toChange(val) { 
        this.current = 1 
        let proIdList = []
        val.forEach(item => {
            proIdList.push(item[2])
        })
        
        this.proIdListArr = proIdList
        this.getTableData()
        let arr = this.selector   
      }
    },
}

</script>

<style lang="scss" scoped>
    .down {
        margin-top:10px;
        float:right
    }
    #level {
        margin-left: 10px;
        width: 225px;
    }
    @import "./bass.css";
    #highlight {
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
        .btn-group {
            position: relative;
            .edit {
            position: absolute;
            top: 50%;
            right: -2%;
            transform: translate(-50%, -50%);
            }
        }
        .bgColor{
            background: #ffffff;
            padding: 20px;
            .toFlex{
                display: flex;
                .item{
                display: flex;
                flex: 1;
                label{
                    margin: auto 0;
                }
                #cascader, #selectd{
                    margin: auto 0;
                    width: 20%;
                    &.mwidth{
                    width: 23%;
                    }
                }
                .item2{
                    margin-left: 20px;
                }
                }
            }
            }
        }
    @media screen and (max-width: 1440px){
        #group .bgColor .toFlex .item #cascader.mwidth{
        width: 25%;
        }
    }

</style>